<template>





  <div class="main-div">










    <Row>
      <Col span="24">
        <div class="app-container" >
          <template>
            <el-row>
              <el-col :span="6">
                <div  class="grid-content bg-blue" style="text-align: center;"  v-on:click="openTodoTask"><span
                  class="num">{{report.duraTionCounts}}</span><br >
                  <span  class="desc">超时任务</span>
                </div>
              </el-col>
              <el-col :span="6">
                <div  class="grid-content bg-blue" style="text-align: center;"  v-on:click="openTodoTask"><span
                  class="num">{{report.rightOffCounts}}</span><br >
                  <span  class="desc">即将超时任务</span>
                </div>
              </el-col>

              <el-col :span="6">
                <div  class="grid-content bg-blue" style="text-align: center;"  v-on:click="openToDoStart"><span
                  class="num">{{report.todayEndStartTotal}}</span><br >
                  <span  class="desc">今日办结</span>
                </div>
              </el-col>
              <el-col :span="6">
                <div  class="grid-content bg-blue" style="text-align: center;"><span
                  class="num">{{report.todayStart}}</span><br >
                  <span  class="desc">今日发起</span>
                </div>
              </el-col>

              <el-col :span="6">

                <div  class="grid-content bg-blue" style="text-align: center;" v-on:click="openTodoTask"><span
                  class="num">{{report.todoTaskCounts}}</span><br >
                  <span  class="desc">待办数量</span>
                </div>

              </el-col>
              <el-col :span="6">
                <div  class="grid-content bg-blue" style="text-align: center;"  v-on:click="openHisTask"><span
                  class="num">{{report.hisCounts}}</span><br >
                  <span  class="desc">已办数量</span>
                </div>
              </el-col>
              <el-col :span="6">
                <div  class="grid-content bg-blue" style="text-align: center;"  v-on:click="openToDoStart"><span
                  class="num">{{report.totalStart}}</span><br >
                  <span  class="desc">发起流程</span>
                </div>
              </el-col>
              <el-col :span="6">
                <div  class="grid-content bg-blue" style="text-align: center;"  v-on:click="openHisStart"><span
                  class="num">{{report.endStartTotal}}</span><br >
                  <span  class="desc">办结流程</span>
                </div>
              </el-col>
              <el-col :span="6">
                <div  class="grid-content bg-blue" style="text-align: center;"  v-on:click="openRunJms"><span
                  class="num">{{report.unReadCount}}</span><br >
                  <span  class="desc">未读通知</span>
                </div>
              </el-col>
              <el-col :span="6">
                <div  class="grid-content bg-blue" style="text-align: center;"  v-on:click="openHisJms"><span
                  class="num">{{report.readCount}}</span><br >
                  <span  class="desc">已读通知</span>
                </div>
              </el-col>
              <el-col :span="6">
                <div  class="grid-content bg-blue" style="text-align: center;"  v-on:click="openRunMsg"><span
                  class="num">{{report.unReadMsgCount}}</span><br >
                  <span  class="desc">未读消息</span>
                </div>
              </el-col>
              <el-col :span="6">
                <div  class="grid-content bg-blue" style="text-align: center;"  v-on:click="openHisMsg"><span
                  class="num">{{report.readMsgCount}}</span><br >
                  <span  class="desc">已读消息</span>
                </div>
              </el-col>


            </el-row>

          </template>
        </div>
      </Col>


    </Row>


    <Row>
      <Col span="24">
      </Col>
    </Row>
  </div>

</template>

<script>
  import {getSql} from "@/api/analy";
  import {getTaskCount,getStartCount,getMsgCount,getJmsCount} from "@/api/report";

  export default {
    name: 'Task',
    components: {},

    data() {
      return {
        report:{
          hisCounts:0,
          todoTaskCounts:0,
          duraTionCounts:0,
          rightOffCounts:0,
          totalStart:0,
          todayStart:0,
          endStartTotal:0,
          todayEndStartTotal:0,
          readCount:0,
          unReadCount:0,
          readMsgCount:0,
          unReadMsgCount:0,
        },
        tableData: [],
        tableHeight: 450,
        queryDate: [],
        total: 0,
        chartVisible: false,
        forbiddenSwitch: false,
        modal_loading: false,
        msgModal: false,
        delMsgModal: false,
        delMsgModalId: "",
        chartData: {},
        sellerId: 0,
        shopName: [],
        messageTemplate: {},
        queryForm: {
          page: 0,
          limit: 10,
        },
        categoryData: []
      }
    },
    mount() {
      this.getData()
      this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop
    },
    created() {
      this.getData()
    },
    methods: {
      openTodoTask:function(){
        this.$router.push({name: 'myTask', query: {t: new Date().getTime()}})
      },
      openHisTask:function(){
        this.$router.push({name: 'histaskIndex', query: {t: new Date().getTime()}})

      },
      openToDoStart:function(){
        this.$router.push({name: 'startupRuIndex', query: {t: new Date().getTime()}})

      },
      openHisStart:function(){
        this.$router.push({name: 'hiIndex', query: {t: new Date().getTime()}})

      },
      openRunJms:function(){
        this.$router.push({name: 'msgRuIndex', query: {t: new Date().getTime()}})

      },
      openHisJms:function(){
        this.$router.push({name: 'HiIndex', query: {t: new Date().getTime()}})

      },
      openRunMsg:function(){
        this.$router.push({name: 'commuRuIndex', query: {t: new Date().getTime()}})

      },
      openHisMsg:function(){
        this.$router.push({name: 'commuHiIndex', query: {t: new Date().getTime()}})

      },

      getData: function () {
        getTaskCount({}).then((response) => {
          if (response.code==0){
            this.report.hisCounts=response.hisCounts
            this.report.todoTaskCounts=response.todoTaskCounts
            this.report.duraTionCounts=response.duraTionCounts
            this.report.rightOffCounts=response.rightOffCounts
            this.report.totalStart=response.totalStart
            this.report.todayStart=response.todayStart
            this.report.endStartTotal=response.endStartTotal
            this.report.todayEndStartTotal=response.todayEndStartTotal
            this.report.unReadCount=response.unReadCount
            this.report.readCount=response.readCount
            this.report.unReadMsgCount=response.unReadMsgCount
            this.report.readMsgCount=response.readMsgCount
          }

        })
      },


    }

  }

</script>
<style lang="scss">
  .task-card {
    margin-top: 10px;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 100px;
    margin: 10px;
    cursor: pointer;
  }
  .bg-blue{
    background-color: #409eff;
  }
  .num {
    line-height: 60px;
    font-size: 36px;
    color: #fff;
    font-weight: 700;
  }
  .desc {
    font-size: 16px;
    color: #fff;
    font-weight: 700;
  }
</style>

